<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-people"></i> 个人中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="home-container">
      <el-row :gutter="40">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div class="font-title">我的财富值</div>
            <div>
              <div class="Num-left"><span class="Num-font">{{integral}}</span><span class="Num-fu">#</span></div>
              <div class="Num-right"><i class="iconfont icon-caifuzhi icon-style"></i></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div class="font-title">今日剩余下载</div>
            <div>
              <div class="Num-left"><span class="Num-font">{{surplusCount}}</span><span class="Num-fu">次</span></div>
              <div class="Num-right"><i class="icon-style iconfont icon-shengyuxiazaishu"></i></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <div class="font-title">已下载文章</div>
            <div>
              <div class="Num-left"><span class="Num-font">{{dwnCount}}</span><span class="Num-fu">篇</span></div>
              <div class="Num-right"><i class="iconfont icon-yixiazaiwenzhang icon-style"></i></div>
            </div>
          </div>
        </el-col>
      </el-row>

            <!-- 表格 -->
            <el-table :data="dataList" v-loading="dataListLoading" style="width: 100%" size="medium" >
                <el-table-column prop="title" label="文章标题" min-width="200px" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="originalUrl" label="下载地址" min-width="200px" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="integral" label="财富值" min-width="200px" align="center" header-align="center">
                </el-table-column>
                <el-table-column prop="createDate" label="下载时间" min-width="200px" align="center" header-align="center">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"  :page-size="pageSize" :total="totalPage" layout="total, prev, pager, next">
                </el-pagination>

      </div>
    </div>
  </div>

</template>

<script>
import bus from '../common/bus'
export default {
  name: 'UserInfo',
  data () {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false,
      integral: 0,
      surplusCount: 0,
      dwnCount: 0,
      cur_page: 1,
      name: localStorage.getItem('ms_username')
    }
  },

  created () {
    this.getData()
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/app/dwnDistoryList'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },

    getData () {
      this.$http({
        url: this.$http.adornUrl(`/app/cardInfo`),
        method: 'post',
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.integral = data.integral
          this.surplusCount = data.surplusCount
          this.dwnCount = data.dwnCount
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" >
.table {
  width: 100%;
  height: 90%;
}

.home-container {
  margin-top: 20px;
  margin-left: 60px;
  margin-right: 60px;
  height: 100%;
  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #ffffff;
  }

  .grid-content {
    /* width: 400px; */
    height: 100px;
    padding: 35px;
    border-radius: 4px;
    /* min-height: 36px; */
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .font-title {
    color: #999999;
    font-size: 18px;
    margin-bottom: 25px;
  }

  .Num-left {
    float: left;
  }

  .Num-right {
    float: right;
  }

  .Num-font {
    font-weight: 700;
    color: #16c79d;
    font-size: 46px;
  }

  .Num-fu {
    color: #16c79d;
    font-size: 20px;
  }

  .icon-style {
    font-size: 46px;
    color: #16c79d;
  }

  .el-table-column {
    font-size: 18px;
    color: #222222;
  }

  .my-table .el-table__body-wrapper .el-table__row .el-table_1_column_1 div {
    position: relative;
  }

  .my-table
    .el-table__body-wrapper
    .el-table__row
    .el-table_1_column_1
    div::before {
    width: 10px;
    height: 10px;
    content: "|";
    display: block;
    font-size: 38px;
    color: #16c79d;
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
